import unit from '../../js/tool/unit.js';
import {config} from '../configData.js';
import recordEvent from '../QianDuanJiShi/recordEvent.js';
import {routerConfig} from '../entry_kfm_spa.js';
import source_code from '../QianDuanYuanMa/source_code.js';
import axios from 'axios';
import Vue from 'vue/dist/vue.js';
import Vuex from 'vuex';
import cp_ii from '../effect/Connected_Particles_II/Connected_Particles_II.js'
import rainbow from '../effect/Rainbow Pack/Rainbow_Pack.js'
Vue.use(Vuex);


let homepage = (function () {

    let HomeUnit = {
        store:new Vuex.Store({
            state:{
                homeR:{
                    /*list存放文章列表的地方*/
                    list:[]
                }
            },
            mutations:{
                updateHomeR: (state,newData)=> {
                    state.homeR = newData;
                }
            },
            getters:{
                getHomeR:(state)=>{
                    return state.homeR||'null';
                }
            }
        })
    };

    let liComponent_L = {
        /*
        * li单独编写一个组件是为了让那个每个li都有自己的article_title值
        * 这种方法的实现也非常简单
        * */
        props:['effectName'],
        template:
        '<div>' +
            '<li :style=[liStyle] @click="emitTitle()">{{liProps.effectName}}</li>' +
        '</div>',
        data:function () {
            return {
                liProps:{
                    effectName:this.$props.effectName
                },
                liStyle:{
                    position:'relative',
                    listStyleType:'none',
                    cursor:'Pointer',
                    textAlign:'center',
                    fontSize:this.getFontSize()+'px',
                    width:100+'%',
                    height:this.getFontSize()+5+'px'
                },
            }
        },
        methods: {
            emitTitle:function () {
                /*通过点击对应的li标签,使得source_code页面能够显示对应内容*/
                console.log('effectName:');
                console.log(this.$data.liProps.effectName);
                source_code.commitEffectName(this.$data.liProps.effectName);
                routerConfig.router.$router.push('/source_code');
            },
            getFontSize: function () {
                return 30;
            }
        }
    };

    let homepage_left = {
        /*
        * 作用:
        * 负责绘制homepage的左半部分,即特效列表
        * */
        props:['width','height'],
        template:
            '<div :style=[leftStyle]>' +
                '<svg :id="getSvgId()" :style=[svgStyle]>' +
                    '<g></g>'+
                '</svg>'+
                '<li-component-l v-if="show" v-for="num in homeL.list" :effectName="num.special_effect_name" :key="num.special_effect_name"></li-component-l>' +
            '</div>',

        data:function () {

            return{
                show:false,
                homeL:{
                    list:[]
                },
                svgStyle:{
                    position:'absolute',
                    display:'inline-block',
                    width:this.getW()+'px',
                    height:this.getH()+'px',
                    opacity:0.4
                },
                leftStyle:{
                    position:'relative',
                    display:'inline-block',
                    float:'left',
                    backgroundColor:'#ffffff',
                    width:this.$props.width+'px',
                    height:this.$props.height+'px'
                }

            }
        },
        methods:{
            getSvgId:function () {
                return 'mySvg';
            },
            getW:function () {
                return this.$props.width;
            },
            getH:function () {
                return this.$props.height;
            },
            rainbowPack:function () {
                rainbow.run(('#'+this.getSvgId()),this.getW(),this.getH());
            },
            showFn:function (bloon) {
                this.$data.show = bloon;
            },
            updateList:function () {
                /*获取特效列表并传输至vuex中*/
                axios.post('queryEffectList')
                    .then( (response) =>{
                        this.$data.homeL.list = response.data;
                        this.showFn(true);
                    });
            },
            updateLeftStyle:function () {
                this.leftStyle.width=this.$props.width+'px';
                this.leftStyle.height=this.$props.height+'px';
            },
            resize:function () {
                this.updateLeftStyle();
            }
        },
        components:{
            'li-component-l':liComponent_L
        },
        mounted:function () {
            this.updateList();
            this.rainbowPack();
            unit.observer.add('hp_left',this.resize);
        }
    };

    let liComponent_R = {
        /*
        * li单独编写一个组件是为了让那个每个li都有自己的article_title值
        * 这种方法的实现也非常简单
        * */
        props:['title'],
        template:
        '<div>' +
            '<li :style=[liStyle] @click="emitTitle()">{{liProps.tit}}</li>' +
        '</div>',
        data:function () {
            return {
                liProps:{
                    tit:this.$props.title
                },
                liStyle:{
                    position:'relative',
                    listStyleType:'none',
                    cursor:'Pointer',
                    textAlign:'center',
                    fontSize:this.getFontSize()+'px',
                    width:100+'%',
                    height:this.getFontSize()+5+'px'
                },
            }
        },
        methods: {
            emitTitle:function () {
                /*通过点击对应的li标签,是的RE页面能够显示对应内容*/
                recordEvent.commitTitle(this.$data.liProps.tit);
                routerConfig.router.$router.push('/record_event');
            },
            getFontSize: function () {
                return 30;
            }
        }
    };


    let homepage_right = {
        /*
        * 作用:
        * 负责绘制homepage的右半部分,即文章列表
        * */
        props:['width','height'],
        template:
            '<div :style=[rightStyle]>' +
                '<canvas :id="getCanvasId()" :style=[canvasStyle] ></canvas>'+
                '<li-component-r v-if="show" v-for="num in homeR.list" :title="num.article_title" :key="num.article_title"></li-component-r>'+
            '</div>',

        data:function () {
            return{
                show:false,
                homeR:{
                    list:[]
                },
                canvasStyle:{
                    position:'absolute'
                },
                rightStyle:{
                    position:'relative',
                    display:'inline-block',
                    float:'left',
                    backgroundColor:'#ffffff',
                    width:this.$props.width+'px',
                    height:this.$props.height+'px'
                }
            }
        },
        methods:{
            getW:function () {
                return this.$props.width;
            },
            getH:function () {
                return this.$props.height;
            },
            getCanvasId:function () {
                return 'myCanvas'
            },
            _cp_ii:function () {
                cp_ii.run(this.getCanvasId(),this.getW(),this.getH(),2,1);
            },
            showFn:function (bloon) {
                this.$data.show = bloon;
            },
            updateList:function () {
                /*获取文章列表并传输至vuex中*/
                axios.post('queryArticleTitleList')
                    .then( (response) =>{
                        this.$data.homeR.list = response.data;
                        this.showFn(true);
                    });
            },
            updateRightStyle:function () {
                this.rightStyle.width=this.$props.width+'px';
                this.rightStyle.height=this.$props.height+'px';
            },
            resize:function () {
                this.updateRightStyle();
            }
        },
        mounted:function () {
            this._cp_ii();
            this.updateList();
            unit.observer.add('hp_right',this.resize);
        },
        beforeDestroy:function () {
            cp_ii.stop();
        },
        components:{
            'li-component-r':liComponent_R
        }

    };

    let midSpace = {
        /*绘制中间的线*/
        props:['width','midSpace','height'],
        template:
            '<div :style=[midSpaceStyle]></div>',

        data:function () {
            return {
                midSpaceStyle:{
                    position:'relative',
                    display:'inline-block',
                    float:'left',
                    backgroundColor:'#000000',
                    width:this.$props.midSpace+'px',
                    height:this.$props.height+'px'
                }
            }
        },
        methods:{
            updateMidSpaceStyle:function () {
                this.$data.midSpaceStyle.width=this.$props.midSpace+'px';
                this.$data.midSpaceStyle.height=this.$props.height+'px';
            },
            resize:function () {
                this.updateMidSpaceStyle()
            }
        },
        mounted:function () {
            unit.observer.add('hp_midSpace',this.resize);
        }
    };

    let root = {
        store:HomeUnit.store,
        template:
        '<transition name="hp">'+
        '<div id="homepage" :style=[homepageStyle]>' +
        '<homepage-left id="homepage_left" :width="dataProps.width" :height="dataProps.height"></homepage-left>' +
        '<mid-space :width="dataProps.width" :midSpace="dataProps.midSpace" :height="dataProps.height"></mid-space>' +
        '<homepage-right id="homepage_right" :width="dataProps.width" :height="dataProps.height"></homepage-right>' +
        '</div>'+
        '</transition>',
        data:function () {
            let getRoot_h = function () {
                return window.innerHeight-config.nav_h;
            };

            return{
                dataProps:{
                    midSpace:this.getProps_w()[0],
                    width:this.getProps_w()[1],
                    height:getRoot_h(),
                },
                homepageStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#7f7f7f',
                    top:config.nav_h+'px',
                    width:window.innerWidth+'px',
                    height:getRoot_h()+'px'
                }
            }
        },
        methods:{
            getProps_w:function () {
                /*
                * 获取一个宽度,这个宽度需要满足一个条件
                * 被最小数减去后,仍能被2整除,最小数初始为2
                * 上面条件为真,返回被减去后的值,不为真则在最小数加一后重复上面的步骤
                * */
                let minNum = 2;
                let w = window.innerWidth-minNum;
                while(w%2!==0){
                    minNum++;
                    w -= minNum;
                }
                w=w/2;
                return [minNum,w];
            },
            updateProps:function () {
                this.$data.dataProps.midSpace=this.getProps_w()[0];
                this.$data.dataProps.width=this.getProps_w()[1];
            },
            updateRoot:function () {
                this.$data.homepageStyle.width = window.innerWidth+'px';
            },
            resize:function () {
                this.updateProps();
                this.updateRoot();
            }
        },
        components:{
            'homepage-left':homepage_left,
            'mid-space':midSpace,
            'homepage-right':homepage_right
        },
        mounted:function () {
            unit.observer.add('hp_root',this.resize);
        }
    };

    return {
        root:root
    }
})();
export default homepage;